iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Mobile Development

如何開發適合電子書閱讀器使用的瀏覽器 Android APP系列 第 24

電子書閱讀器上的瀏覽器 [Day24] 翻譯功能 (VI) 翻譯結果與主畫面同步捲動

  • 分享至 

  • xImage
  •  

在對照著看翻譯結果和原文時,需要不斷捲動畫面。如果兩邊畫面可以同步捲動的話,就能省下手指在兩個 WebView 中來回操作的重覆行為。要達到同步捲動的功能,必須要將其中一個 WebView 的捲動狀態也反應到另一個 WebView 才行。

在實作翻譯功能的 TranslationViewController 中,先加入一個 function variable onScrollChangeListener,讓外部可以收到來自於翻譯結果網頁的捲動事件。

class TranslationViewController(
     private val activity: Activity,
     private val translationViewBinding: TranslationPanelBinding,
     private val twoPaneLayout: TwoPaneLayout,
     private val showTranslationAction: () -> Unit,
     private val onTranslationClosed: () -> Unit
     private val onTranslationClosed: () -> Unit,
     private val onScrollChangeListener: NinjaWebView.OnScrollChangeListener // 這一行
) { ... }

為翻譯網頁的 WebView 設定其 scrollListener 為外部傳進來的 OnScrollChangeListener。在 sync scroll 按鈕被點擊時, toggleSyncScroll 會被呼叫,進行同步捲動狀態的改變、按鈕圖案的切換、以及設定 WebView 的 scroll listener

private fun toggleSyncScroll(shouldSyncScroll: Boolean = false) {
         isScrollSynced = shouldSyncScroll
         val listener = if (isScrollSynced) onScrollChangeListener else null
         webView.setScrollChangeListener(listener)
         val drawable = if (isScrollSynced) R.drawable.selected_border_bg else R.drawable.backgound_with_border
         translationViewBinding.syncScroll.setBackgroundResource(drawable)
     }

TranslationViewController 做了擴充後,我們來看看怎麼在 BrowserActivity 中套用它。

private val translateController: TranslationViewController by lazy {
        TranslationViewController(
            this,
            binding.subContainer,
             binding.twoPanelLayout,
             { showTranslation() },
             { if (ninjaWebView.isReaderModeOn) ninjaWebView.toggleReaderMode() },
             object : NinjaWebView.OnScrollChangeListener {
                 override fun onScrollChange(scrollY: Int, oldScrollY: Int) {
                     val offset = scrollY - oldScrollY
                     ninjaWebView.scrollY += offset
                 }
             } //根據翻譯 WebView 捲動程度,同步反應到原文的 ninjaWebView 中
         )
     }

建立 TranslationViewController時,最後加入 OnScrollChangeListener 的實作,取 Translation 中的捲動情況,並反應在原本的 WebView (nijaWebView) 中。

示範影片

開啟同步捲動的話,在使用上更為方便!

Yes

原始碼參考版本

https://github.com/plateaukao/browser/releases/tag/v8.13.0


上一篇
電子書閱讀器上的瀏覽器 [Day23] 雙視窗可拖拉調整大小元件
下一篇
電子書閱讀器上的瀏覽器 [Day25] 支援多 Activity
系列文
如何開發適合電子書閱讀器使用的瀏覽器 Android APP30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言